@import 'element-plus/theme-chalk/src/dark/css-vars.scss';

html.dark {
  // 变量
  --el-text-color-primary: #d0d0d0;
  --el-color-primary-dark-2: var(--el-color-primary-light-2) !important;
  --el-color-primary-light-9: var(--el-color-primary-dark-8) !important;
  --el-color-primary-light-8: var(--el-color-primary-dark-7) !important;
  --el-color-primary-light-7: var(--el-color-primary-dark-6) !important;
  --el-color-primary-light-5: var(--el-color-primary-dark-4) !important;
  --el-color-primary-light-3: var(--el-color-primary-dark-3) !important;

  // 背景
  #app {
    background: var(--el-bg-color);
  }

  // 登录背景
  .login_bg {
    background: var(--el-bg-color);
  }

  // 框架
  .admin-ui-header {
    background: var(--el-bg-color-overlay);
    border-bottom: 1px solid var(--el-border-color-light);
    height: 59px;
  }

  .main-ui-side-split {
    background: var(--el-bg-color);
  }

  .main-ui-side-split li {
    color: var(--el-text-color-primary);
  }

  .main-ui-side {
    background: var(--el-bg-color-overlay);
    border-color: var(--el-border-color-light);
  }

  .admin-ui-side-top, .admin-ui-side-bottom {
    border-color: var(--el-border-color-light);
  }

  .admin-ui-side-top h2 {
    color: var(--el-text-color-primary);
  }

  .admin-ui-top-bar, .admin-ui-tags {
    background: var(--el-bg-color-overlay);
    border-color: var(--el-border-color-light);
  }

  .admin-ui-tags li:hover:not(.active):not(.active-radius)::after {
    background-color: rgba(143, 143, 143, 0.2);
  }

  .admin-ui-tags .active-radius::before {
    background: var(--el-bg-color-overlay);
  }

  .admin-ui-tags .active-radius::after {
    background: var(--el-bg-color-overlay);
  }

  .admin-ui-tags li a:hover {
    color: #fff;
  }

  .admin-ui-tags li.active-radius a:hover {
    color: #fff;
  }

  .admin-ui-main {
    background: var(--el-bg-color);
  }

  .drawerBG {
    background: var(--el-bg-color);
  }

  .admin-ui-header-menu .el-menu {
    --el-menu-bg-color: var(--el-bg-color-overlay) !important;
    --el-menu-hover-bg-color: #171819 !important;
  }

  .admin-ui-header-menu .el-menu .el-sub-menu__title {
    background-color: transparent !important;
  }

  // 全局滚动条样式
  ::-webkit-scrollbar-thumb {
    background-color: rgba(163, 166, 173, 0.3);
  }

  ::-webkit-scrollbar-thumb:hover {
    background-color: rgba(163, 166, 173, 0.5);
  }

  // 组件
  .el-header, .el-main.no-padding, .el-footer, .app-search {
    background: var(--el-bg-color-overlay);
    border-color: var(--el-border-color-light);
  }

  .el-main {
    background: var(--el-bg-color);
  }

  .el-aside {
    background: var(--el-bg-color-overlay);
    border-color: var(--el-border-color-light);
  }

  .el-table .el-table__body-wrapper {
    background: var(--el-bg-color);
  }

  .el-table th.is-sortable:hover {
    background: #111;
  }

  .el-tabs--left.el-tabs--border-card .el-tabs__item.is-left.is-active {
    border: 1px solid var(--el-border-color-light);
  }

  /* 克隆并自定义 ElMessage 样式，不会影响 ElMessage 原本样式，在 src/utils/modal 中调用自定义样式 ElMessage 方法即可，暗黑模式在 assets/style/dark.scss 文件进行了适配 */
  .jcx-message {
    background-color: rgb(36 37 37) !important;
    background-image: initial !important;
    border: 1px solid var(--el-border-color-light);
    box-shadow: rgb(13 13 13 / 12%) 0 3px 6px -4px, rgb(13 13 13 / 8%) 0 6px 16px 0, rgb(13 13 13 / 5%) 0 9px 28px 8px !important;

    & .el-message__content {
      color: #fff !important;
      pointer-events: all !important;
      background-image: initial !important;
    }

    & .el-message__closeBtn {
      &:hover {
        color: rgb(255 255 255 / 85%);
        background-color: rgb(255 255 255 / 12%);
      }
    }
  }

  .lf-dndpanel {
    background-color: rgba(163, 166, 173, 0.5) !important;
  }

  .lf-control {
    background-color: rgba(163, 166, 173, 0.5) !important;
  }

  .el-dialog {
    border: 1px solid var(--el-border-color-light);
  }

  .el-drawer {
    border: 1px solid var(--el-border-color-light);
  }

  .el-message {
    border: 1px solid var(--el-border-color-light);
  }

  .el-message-box {
    border: 1px solid var(--el-border-color-light);
  }

  .el-notification {
    border: 1px solid var(--el-border-color-light);
  }

}
